<template>
  <div class="layout">
    <Layout>
      <Header :style="{position: 'fixed', width: '100%',zIndex:'900'}">
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">
            <img src="../assets/logo.png" alt="" width="50">
          </div>
          <div class="layout-nav">
            <div v-for="(item,index) in menuList" :name="index" :to="item.to" :key="index">
              <Icon :type="item.icon"></Icon>
              {{item.name}}
            </div>
          </div>
        </Menu>
      </Header>

      <Content :style="{margin: '88px 0 0', background: '#fff', minHeight: '500px'}">
        <router-view></router-view>
      </Content>

      <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
    </Layout>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      menuList: [
        {
          name: '首页',
          icon: 'ios-navigate',
          to: 'index'
        },
        {
          name: '类别',
          icon: 'ios-keypad',
          to: 'postClass'
        },
        {
          name: '新建',
          icon: 'ios-analytics',
          to: 'create'
        },
        {
          name: '修改',
          icon: 'ios-paper',
          to: 'edit'
        },
        {
          name: '关于我',
          icon: 'ios-paper',
          to: 'aboutMe'
        }
      ]
    }
  }
}
</script>

<style scoped>
  @import "../assets/css/home.css"

</style>
